.IphoneFlexible {
   --rate: 1;//速率

   .circle {
      width: 46px;
      height: 46px;
      border: 20px solid #007ae4;
      border-radius: 46px;
      background-color: rgb(44 81 116 / 74.2%);
      display: flex;
      align-items: center;
      animation: circle1 calc(var(--rate) * 2s) forwards ease-in-out, circle2 calc(var(--rate) * 1s) calc(var(--rate) * 3s) forwards ease-in-out;
      position: relative;

      @keyframes circle1 {
         0% {
            opacity: 0;
            transform: scale(0) translateY(200px);
            border-color: transparent;
         }

         60% {
            opacity: 1;
            border-color: #007ae4;
            transform: scale(1);
         }

         80% {
            transform: translateY(0);
            border-width: 2px;
         }

         100% {
            transform: translateY(0);
            border-width: 0px;
         }
      }

      @keyframes circle2 {
         to {
            width: 200px;
         }
      }

      .span1 {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background-color: #007ae4;
         color: #fff;
         font-weight: 700;
         font-size: 18px;
         vertical-align: middle;
         animation: span1 calc(var(--rate)  * 0.8s) calc(var(--rate)  * 2s)  ease-in-out forwards;
         opacity: 0;
         vertical-align: middle;
         margin-left: 7px;

         @keyframes span1 {
            from {
               transform: scale(0);
               opacity: 1;
            }

            to {
               transform: scale(1);
               opacity: 1;

            }
         }
      }

      .span2 {
         transform-origin: left center;
         font: 700 16px/1 "微软雅黑";
         margin-left: 20px;
         color: #fff;
         animation: span2 calc(var(--rate)  * 2s)  calc(var(--rate)  * 4s) ease-in-out forwards;
         position: absolute;
         left: 31px;
         opacity: 0;

         @keyframes span2 {
            from {
               opacity: 0;
            }

            to {
               opacity: 1;
            }
         }
      }
   }

}